<template>
  <!-- <fui-bottom-popup :show="show" @close="closePopup">
	  <view class="fui-custom__wrap">
      <fui-input borderTop placeholder="请输入用户名"></fui-input>
	  </view>
  </fui-bottom-popup> -->

  <view class="top">
    <view class="top-title">请完善信息</view>
    <view class="top-subtitle">如实填写信息，获取更优质的功能和服务</view>
  </view>
  <fui-form :formData="formData" @submit="submit" >
  <view class="center-top radius">
    <view class="line"></view>
    <view class="center-top-item" @click="chooseAvatar">
    <fui-form-item prop="formData[0].image">
      <view class="content">
        <view class="left">企业商标</view>
        <view class="right">
          <image class="right-img" :src="formData.image"></image>
          <view  ><image class="avtar-label"
            src="/src/static/tabs/arrow.png"
          /></view>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.name">
      <view class="content" >
        <view class="left">企业全称</view>
        <view class="right">
          <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.name"></fui-input>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.license_num">
      <view class="content" >
        <view class="left">机构代码</view>
        <view class="right">
          <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.license_num"></fui-input>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.legal">
      <view class="content" >
        <view class="left">公司法人</view>
        <view class="right">
          <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.legal"></fui-input>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.company_scale">
      <view class="content" >
        <view class="left">企业规模</view>
        <view class="right">
          <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.company_scale"></fui-input>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.category_id_f">
      <view class="content" >
        <view class="left">所属行业</view>
        <view class="right">
          <fui-picker  :show="showCategoryF" 
           @change="confrimcategoryF"
           @cancel="closeSelectCategoryF" btnSize="28" size="16" :options="types.map(type => type.label)" >
          </fui-picker>
          <view class="picker" @click="openSelectCategoryF">
              <fui-input disabled="true"  maxlength="-1" textAlign="right" size="22" style="margin-right:-10rpx;" :value="formData.category_id_f" class="right-text">
                  <image class="label"
                   src="/src/static/tabs/arrow.png"
                  />
              </fui-input>
          </view>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.category_id_c">
      <view class="content" >
        <view class="left">归属分类</view>
        <view class="right">
          <fui-picker  :show="showCategoryC" 
           @change="confrimcategoryC"
           @cancel="closeSelectCategoryC" btnSize="28" size="16" :options="types.map(type => type.label)" >
          </fui-picker>
          <view class="picker" @click="openSelectCategoryC">
              <fui-input disabled="true"  maxlength="-1" textAlign="right" size="22" style="margin-right:-10rpx;" :value="formData.category_id_c" class="right-text">
                  <image class="label"
                   src="/src/static/tabs/arrow.png"
                  />
              </fui-input>
          </view>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.operate">
      <view class="content" >
        <view class="left">经营内容</view>
        <view class="right">
          <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.operate"></fui-input>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.address">
      <view class="content" >
        <view class="left">详细地址</view>
        <view class="right">
          <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.address"></fui-input>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
    <view class="center-top-item" >
    <fui-form-item  :prop="formData.tel">
      <view class="content" >
        <view class="left">企业电话</view>
        <view class="right">
          <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.tel"></fui-input>
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </fui-form-item>
    </view>
  </view>
    <view class="button-container" @click="submit">
      <view class="my-button">
        提交修改
      </view>
    </view>
  </fui-form>

</template>

<script lang="ts" setup>
// 这里可以添加你的 TypeScript 逻辑
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import sheep from '@/sheep';
const formData = ref(
{
  id: 2,
  name: "",
  license_num: "",
  legal: "",
  company_scale:"",
  reg_time: "2013--15",
  economic_type: "",
  category_id_f:null ,
  category_id_c: null,
  operate: "",
  city: 2,
  county: 3,
  address: "",
  tel: null,
  image:""
});
const types = ref([
  {
    label: '住宅',
    value: '住宅'
  },
  {
    label: '客运车站、码头、机场',
    value: '客运车站、码头、机场'
  },
  {
    label: '商场（市场）、宾馆（饭店）、体育场（馆）、会堂、公共娱乐场所等公众聚集场所',
    value: '商场（市场）、宾馆（饭店）、体育场（馆）、会堂、公共娱乐场所等公众聚集场所'
  },
  {
    label: '医院、养老院、学校、托儿所、幼儿园',
    value: '医院、养老院、学校、托儿所、幼儿园'
  },
    {
      label: '国家机关单位',
      value: '国家机关单位'
    },
    {
      label: '公共图书馆、展览馆、博物馆、档案馆、文物保护单位',
      value: '公共图书馆、展览馆、博物馆、档案馆、文物保护单位'
    }
]);
const showCategoryF = ref(false);
const showCategoryC = ref(false);

const openSelectCategoryC = () => {
  showCategoryC.value = true;
};

const openSelectCategoryF = () => {
  showCategoryF.value = true;
};
const closeSelectCategoryC= () => {
  showCategoryC.value = false;
};

const closeSelectCategoryF = () => {
  showCategoryF.value = false;
};
const confrimcategoryC = (e) => {
  formData.value.category_id_c = e.value;
  console.log("formData.value.category_id_c",formData.value.category_id_c);
  closeSelectCategoryC();
};
const confrimcategoryF = (e) => {
  formData.value.category_id_f = e.value;
  console.log("formData.value.category_id_f",formData.value.category_id_f);
  closeSelectCategoryF();
};
//选择头像
const chooseAvatar = async () => {
  try {
    const res = await uni.chooseImage({
      count: 1, // 最多选择1张
      sizeType: ['compressed'], // 压缩图
      sourceType: ['album'], // 从相册选择
      success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        // 这里可以添加上传逻辑
        // uploadAvatar(tempFilePaths[0]);
      }
    });
  } catch (err) {
    // handleImageError(err);
  }
};

//获取页面详细信息
const qyDetail = (id) =>{
  const params = {
    c_id : id
  }
  sheep.$api.qy_index.detail(params).then(res => {
    if(res.code === 200){
      formData.value.id = res.data._id;
      formData.value.name = res.data.c_name;
      formData.value.license_num = res.data.c_license_num;
      formData.value.legal = res.data.c_legal;
      formData.value.company_scale="大型企业"
      formData.value.address= res.data.c_reg_adress;
      formData.value.reg_time= res.data.c_reg_time;
      formData.value.economic_type= res.data.c_economic_type;
      formData.value.category_id_f = "住宅";
      formData.value.category_id_c = res.data.category_id_c;
      formData.value.operate= res.data.c_operate;
      formData.value.city= res.data.city;
      formData.value.county= res.data.county;
      formData.value.tel= res.data.c_tel;
    }
  })
}

onLoad((options) => {
    const companyId = options.companyId;
    qyDetail(companyId)
  });

//提交修改
const  submit = () => {
console.log(formData)
}
</script>

<style scoped>
.fui-custom__wrap {
	width: 100%;
	height: 520rpx;
	display: flex;
	align-items: center;
	justify-content: center;
  z-index: -2;
}
page {
  background: #fff;
  height: 100%;
}

.radius {
  border-radius: 3%;
}

.top {
  text-align: center;
  margin: 100rpx auto;
}

.top-title {
  font-size: 32rpx;
  font-weight: 600;
  margin: 60rpx auto;
}

.top-subtitle {
  margin: 20rpx auto;
  font-size: 26rpx;
}

.center-top {
  font-weight: 600;
  width: 100%;
  margin: 30rpx auto 0rpx auto;
  padding-bottom: 5rpx;
}

.center-title {
  display: flex;
  justify-content: space-between;
  padding-top: 10rpx;
  margin: 0 20rpx;
}

.center-title-left {
  font-weight: 600;
}

.center-top-item {
  font-size: 22rpx;
  line-height: 90rpx;

}

.content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #00000017;/* 确保边框样式正确 */
  padding: 0 20rpx 0rpx 20rpx;
}

.left {
  display: flex;
  min-width: 200rpx;
}

.right {
  display: flex;
  color: #666;
}
.picker{
  display: flex;
}
.right-text {
  height: 90rpx;
  width:440rpx;
  margin-right: 30rpx;
}
.label{
  position: relative;
  top: 0rpx;
  width: 22rpx;
  height: 22rpx;
}
.avtar-label{
  position: relative;
  top: 3rpx;
  left: -18rpx;
  width: 22rpx;
  height: 22rpx;
}
.right-img {
  width: 70rpx;
  height: 70rpx;
  position: relative;
  top: 10rpx;
  right: 45rpx;
}

.line {
  width: 100%;
  height: 1rpx;
  background-color: #00000017;
  margin: 0rpx auto 0rpx auto;
}

.center-edit {
  font-size: 24rpx;
  color: #666;
}

.button-container {
  display: flex;
  justify-content: center;
}

.my-button {
  margin-top: 150rpx;
  width: 50%;
  border-radius: 30rpx;
  height: 70rpx;
  background-color: #0038b1;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 5px rgba(164, 161, 161, 0.5);
}
</style>
